<template>
  <div style="background: #27ae60; min-height: 100vh;">
    <div style="display: flex; justify-content: center; align-items: center; padding: 20px 0 10px 0;">
      <van-button
        round
        plain
        hairline
        color="#fff"
        style="border: 2px solid #fff; color: #fff; background: transparent; border-radius: 20px; width: 90px; height: 32px; font-size: 14px;"
        @click="toggleLang"
      >
        {{ langLabel }}
      </van-button>
    </div>
    <van-form @submit="onSubmit">
      <van-field v-model="form.name" name="name" :label="t('name')" :placeholder="t('name')" required />
      <van-field v-model="form.position" name="position" :label="t('position')" :placeholder="t('position')" required />
      <van-field v-model="form.businessGroup" name="businessGroup" :label="t('businessGroup')" :placeholder="t('businessGroup')" required />
      <van-field v-model="form.department" name="department" :label="t('department')" :placeholder="t('department')" required />
      <van-field v-model="form.company" name="company" :label="t('company')" :placeholder="t('company')" required />
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">{{t('submit')}}</van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { showToast } from 'vant';
import { cardInfoApi } from '@/api/index';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';

const { t, locale } = useI18n();
const router = useRouter();
const form = ref({
  name: '',
  position: '',
  businessGroup: '',
  department: '',
  company: ''
});

const langLabel = computed(() => (locale.value === 'zh' ? 'English' : '中文'));
const toggleLang = () => {
  locale.value = locale.value === 'zh' ? 'en' : 'zh';
};

// 监听 locale 变化，强制刷新 t 依赖（如有必要）
watch(locale, () => {}, { immediate: true });

const onSubmit = async () => {
  try {
    await cardInfoApi.h5add(form.value);
    showToast(t('submitSuccess'));
    router.replace('/');
  } catch (e) {
    showToast(t('submitFail'));
  }
};
</script> 